import React,{ Component,Fragment } from 'react';
import pic from './../../assets/homeGoods/212121.jpg'
import axios from 'axios';
import Toast from '../../commponents/toast'
import './DetailsPage.css'
class DetailsPage extends Component {
    constructor(props){
        super(props);
        this.state = {
            list:[]
        };
    }

    componentDidMount(){
        axios.get('http://localhost:3000/api/details',{
            params: {
                id: this.props.match.params.id
            }
        }).then(res=>{
            this.setState({
                list:[...res.data.message]
            })
        });
    }

    backToMenu = () => {
        this.props.history.goBack()
    }

    showList = () => {
        if(this.state.list.length > 0){
            return this.state.list.map((item,index)=>{
                return (
                    <div key={index}>
                        <div className="fruit-pic">
                            <span onClick={this.backToMenu}></span>
                            <img src={item.goods_thumb} alt="" />
                        </div>
                        <div className="d-msg" style={{"color":"#333"}}>
                            <p className="d-title">{item.goods_long_title}</p>
                            <div className="d-detail">
                                <span>{item.goods_discount}</span><i>{item.goods_description}</i>
                            </div>
                            <div className="d-price">
                                <span>￥{item.goods_now_price}</span>
                                <span>{item.goods_origin}</span>
                                <span>产地:</span>
                            </div>
                            <div className="d-back">
                                <span></span>
                                不支持7天无理由退货
                            </div>
                            <div style={{"background":"rgb(244,244,244)","height":"10px"}}></div>
                            <div className="d-discount">
                                <p>促销</p>
                                <div className="discount-msg">
                                    <span>优惠</span>
                                    <i>{item.goods_discount}</i>
                                </div>
                            </div>
                            <div style={{"background":"rgb(244,244,244)","height":"10px"}}></div>
                            <div className="d-size">
                                <i>规格</i>
                                <span>{item.goods_format}</span>
                            </div>
                            <div style={{"background":"rgb(244,244,244)","height":"10px"}}></div>
                            <div className="d-send">
                                <i>送至</i>
                                <span>上海 宝山区 宝山区</span>
                                <p>
                                    <span>有货</span>
                                    <span>20:00 前完成订单，预计明日(5月5日)送达</span>
                                </p>
                            </div>
                            <div style={{"background":"rgb(244,244,244)","height":"10px"}}></div>
                            <div className="add-cart">
                                <span onClick={()=>{this.test(item)}}>加入购物车</span>
                            </div>
                        </div>
                    </div>
                )
            })
        }
        
    }

    test = (item) =>{
        axios.post('http://localhost:3000/api/add_shop_cart',{
            params:{
                goods_id:item.goods_id,
                goods_name:item.goods_short_title,
                thumb_url:item.goods_thumb,
                price:item.goods_now_price,
            }
        }).then(res=>{
            if(res.data.success_code){
                Toast.info(res.data.message,2000);
            }
        })
    }

    render (){
        return (
            <Fragment>
                <div className="details-container">
                    {this.showList()}
                </div>
            </Fragment>
        )
    }
}



export default DetailsPage;